<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位的层级</title>
    <style>
      .outer {
        height: 200px;
        width: 200px;
        padding: 20px;
        background-color: skyblue;
        position: relative;
        z-index: 2;
      }
      .inner {
        height: 100px;
        width: 100px;
      }
      /*z-index：是设置定位的层级的属性 没有单位 只有数字 数字越大 单位越层级越高 在父亲元素内看层级数 在父亲元素外的看父亲元素的层级 默认是0 只有开启定位才有定位层级 */
      .inner1 {
        background-color: grey;
      }
      .inner2 {
        background-color: lime;
        position: relative;
        top: -75px;
        left: 25px;
        /* 元素2跑到了最上面 */
        /*z-index: 10;*/
      }
      .inner3 {
        background-color: blue;
        position: absolute;
        top: 75px;
        left: 75px;
      }
      .inner4 {
        background-color: orange;
        position: fixed;
        top: 115px;
        left: 115px;
        z-index: 50;
      }
      .outer2 {
        width: 100px;
        height: 100px;
        background-color: purple;
        position: relative;
        top: -110px;
        left: 125px;
        /* 当层级比inner4高时被压在地下 当层级比高时在上面 当其父元素的层级比其低时 就会被压在下面 无论自己的层级有多高 */
        z-index: 10;
      }
    </style>
</head>
<body>
  <div class="outer">
    <div class="inner inner1">1</div>
    <div class="inner inner2">2</div>
    <div class="inner inner3">3</div>
    <div class="inner inner4">4</div>
  </div>
  <div class="outer2">5</div>
</body>
</html>